<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备数据记录 | 华为云IoT平台</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --huawei-blue: #003594;
            --huawei-light-blue: #0066CC;
            --huawei-light: #f0f9ff;
            --dark-gray: #1e293b;
            --light-gray: #f8fafc;
            --success: #10B981;
            --warning: #F59E0B;
            --danger: #EF4444;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            min-height: 100vh;
            color: #1e293b;
        }

        .dashboard-header {
            background: linear-gradient(120deg, var(--huawei-blue) 0%, var(--huawei-light-blue) 100%);
            box-shadow: 0 4px 20px rgba(0, 53, 148, 0.3);
            padding: 15px 30px;
        }

        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo {
            width: 45px;
            height: 45px;
            background: white;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo i {
            color: var(--huawei-blue);
            font-size: 24px;
        }

        .logo-text h1 {
            color: white;
            font-size: 24px;
            font-weight: 700;
        }

        .logo-text p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }

        .back-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            padding: 8px 15px;
            border-radius: 8px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .back-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .container {
            max-width: 1400px;
            margin: 30px auto;
            padding: 0 20px;
        }

        .card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
            padding: 25px;
            margin-bottom: 30px;
        }

        .card-title {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e2e8f0;
        }

        .card-title i {
            color: var(--huawei-blue);
            font-size: 24px;
        }

        .card-title h2 {
            font-size: 22px;
            font-weight: 700;
        }

        .filter-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 25px;
        }

        @media (max-width: 768px) {
            .filter-section {
                grid-template-columns: 1fr;
            }
        }

        .filter-group {
            background: var(--light-gray);
            border-radius: 12px;
            padding: 20px;
        }

        .filter-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .filter-header i {
            color: var(--huawei-blue);
            font-size: 20px;
        }

        .filter-header h3 {
            font-size: 18px;
            font-weight: 600;
        }

        .filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 15px;
        }

        label {
            font-weight: 500;
            color: #475569;
            min-width: 80px;
        }

        select, input[type="date"] {
            flex: 1;
            min-width: 200px;
            padding: 12px 15px;
            border: 1px solid #cbd5e1;
            border-radius: 10px;
            background: white;
            font-size: 16px;
            color: #334155;
        }

        .btn {
            padding: 12px 25px;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--huawei-light-blue) 0%, var(--huawei-blue) 100%);
            color: white;
        }

        .btn-secondary {
            background: #e2e8f0;
            color: #334155;
        }

        .btn-export {
            background: linear-gradient(135deg, #059669 0%, #10B981 100%);
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .btn-primary:hover {
            box-shadow: 0 4px 15px rgba(0, 101, 204, 0.3);
        }

        .btn-secondary:hover {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-export:hover {
            box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
        }

        .table-container {
            overflow-x: auto;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-top: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 1000px;
        }

        th {
            background: var(--huawei-blue);
            color: white;
            padding: 16px 20px;
            text-align: left;
            font-weight: 600;
            position: sticky;
            left: 0;
        }

        td {
            padding: 14px 20px;
            border-bottom: 1px solid #e2e8f0;
        }

        tr:nth-child(even) {
            background-color: #f8fafc;
        }

        tr:hover {
            background-color: #f1f5f9;
        }

        .status-active {
            background-color: #dcfce7;
            color: #166534;
            padding: 5px 12px;
            border-radius: 20px;
            font-weight: 500;
            display: inline-block;
        }

        .status-inactive {
            background-color: #fee2e2;
            color: #b91c1c;
            padding: 5px 12px;
            border-radius: 20px;
            font-weight: 500;
            display: inline-block;
        }

        .on-state {
            background-color: #dcfce7;
            color: #166534;
            padding: 5px 12px;
            border-radius: 20px;
            font-weight: 500;
            display: inline-block;
        }

        .off-state {
            background-color: #fee2e2;
            color: #b91c1c;
            padding: 5px 12px;
            border-radius: 20px;
            font-weight: 500;
            display: inline-block;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 10px;
            flex-wrap: wrap;
        }

        .pagination a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #f1f5f9;
            color: #334155;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .pagination a:hover {
            background: #e2e8f0;
            transform: translateY(-2px);
        }

        .pagination .current {
            background: var(--huawei-blue);
            color: white;
        }

        .pagination-control {
            background: var(--light-gray);
            padding: 8px 16px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .log-container {
            margin-top: 30px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
            padding: 25px;
        }

        .log-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
        }

        .log-header i {
            color: var(--huawei-blue);
            font-size: 24px;
        }

        .log-header h2 {
            font-size: 22px;
            font-weight: 700;
        }

        .log-table {
            width: 100%;
            border-collapse: collapse;
        }

        .log-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #e2e8f0;
        }

        .log-row {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .log-icon {
            color: var(--huawei-blue);
            font-size: 18px;
            margin-top: 3px;
        }

        .log-content {
            flex: 1;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 16px 24px;
            border-radius: 12px;
            color: white;
            font-weight: 600;
            z-index: 1000;
            transform: translateX(120%);
            transition: transform 0.3s ease;
            background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification-warning {
            background: linear-gradient(135deg, var(--warning) 0%, #D97706 100%);
        }

        .footer {
            text-align: center;
            padding: 20px;
            color: #64748b;
            font-size: 14px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header class="dashboard-header">
        <div class="header-content">
            <div class="logo-container">
                <div class="logo">
                    <i class="fas fa-cloud"></i>
                </div>
                <div class="logo-text">
                    <h1>华为云IoT平台</h1>
                    <p>设备数据记录与分析</p>
                </div>
            </div>
            <a href="/" class="back-btn">
                <i class="fas fa-arrow-left"></i>
                返回首页
            </a>
        </div>
    </header>

    <div class="container">
        <!-- 数据记录卡片 -->
        <div class="card">
            <div class="card-title">
                <i class="fas fa-database"></i>
                <h2>设备数据记录</h2>
            </div>

            <!-- 筛选区域 -->
            <div class="filter-section">
                <div class="filter-group">
                    <div class="filter-header">
                        <i class="fas fa-microchip"></i>
                        <h3>设备筛选</h3>
                    </div>
                    <div class="filter-row">
                        <label for="device_select">设备：</label>
                        <select id="device_select" name="device_id">
                            <option value="">-- 请选择设备 --</option>
                            {% for device in devices %}
                                <option value="{{ device.id }}" {% if device.id == selected_device %}selected{% endif %}>{{ device.id }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="filter-group">
                    <div class="filter-header">
                        <i class="fas fa-calendar"></i>
                        <h3>时间范围</h3>
                    </div>
                    <div class="filter-row">
                        <label>从：</label>
                        <input type="date" id="start_date" name="start_date" value="{{ start_date if start_date else '' }}">
                    </div>
                    <div class="filter-row">
                        <label>至：</label>
                        <input type="date" id="end_date" name="end_date" value="{{ end_date if end_date else '' }}">
                    </div>
                </div>
            </div>

            <!-- 按钮区域 -->
            <div style="display: flex; gap: 15px; margin-top: 20px;">
                <button class="btn btn-primary" onclick="loadData(1)">
                    <i class="fas fa-filter"></i>
                    应用筛选
                </button>
                <button class="btn btn-secondary" onclick="resetFilter()">
                    <i class="fas fa-redo"></i>
                    重置筛选
                </button>
                <button class="btn btn-export" onclick="exportCSV()">
                    <i class="fas fa-download"></i>
                    导出CSV
                </button>
            </div>

            <!-- 数据表格 -->
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>时间戳</th>
                            <th>设备ID</th>
                            <th>状态</th>
                            <th>温度 (°C)</th>
                            <th>湿度 (%)</th>
                            <th>光照 (lx)</th>
                            <th>土壤湿度 (%)</th>
                            <th>雨水 (mm)</th>
                            <th>紫外线</th>
                            <th>二氧化碳浓度</th>
                            <th>LED状态</th>
                            <th>风扇</th>
                            <th>水泵</th>
                        </tr>
                    </thead>
                    <tbody id="data_table">
                        {% for data in shadow_data %}
                        <tr>
                            <td>{{ data.timestamp | datetime }}</td>
                            <td>{{ device_info.device_id }}</td>
                            <td>
                                {% if data.stat %}
                                    <span class="status-active">在线</span>
                                {% else %}
                                    <span class="status-inactive">离线</span>
                                {% endif %}
                            </td>
                            <td>{{ data.tem }}</td>
                            <td>{{ data.hum }}</td>
                            <td>{{ data.light }}</td>
                            <td>{{ data.soil }}</td>
                            <td>{{ data.rain }}</td>
                            <td>{{ data.uv }}</td>
                            <td>{{ data.co2 }}</td>
                            <td>
                                {% if data.led %}
                                    <span class="on-state">开启</span>
                                {% else %}
                                    <span class="off-state">关闭</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if data.fan %}
                                    <span class="on-state">开启</span>
                                {% else %}
                                    <span class="off-state">关闭</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if data.water %}
                                    <span class="on-state">开启</span>
                                {% else %}
                                    <span class="off-state">关闭</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- 分页控件 -->
            <div class="pagination">
                {% if page > 1 %}
                <a href="javascript:void(0)" onclick="loadData({{ page - 1 }})">
                    <i class="fas fa-chevron-left"></i>
                </a>
                {% endif %}

                {% for p in range(1, total_pages + 1) %}
                <a href="javascript:void(0)" onclick="loadData({{ p }})" {% if p == page %}class="current"{% endif %}>{{ p }}</a>
                {% endfor %}

                {% if page < total_pages %}
                <a href="javascript:void(0)" onclick="loadData({{ page + 1 }})">
                    <i class="fas fa-chevron-right"></i>
                </a>
                {% endif %}
            </div>
        </div>

        <!-- 设备日志卡片 -->
        <div class="log-container">
            <div class="log-header">
                <i class="fas fa-clipboard-list"></i>
                <h2>设备日志</h2>
            </div>

            <table class="log-table">
                <tbody>
                    {% for log in logs %}
                    <tr>
                        <td>
                            <div class="log-row">
                                <i class="fas fa-info-circle log-icon"></i>
                                <div class="log-content">{{ log }}</div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="footer">
            <p>华为云IoT平台 © 2023 - 智能设备监控系统</p>
            <p>数据更新时间: {{ current_time }}</p>
        </div>
    </div>

    <div class="notification">数据加载成功！</div>

    <script>
        function loadData(page) {
            const deviceId = $('#device_select').val();
            const startDate = $('#start_date').val();
            const endDate = $('#end_date').val();
            $.ajax({
                url: '/api/iot',
                data: { device_id: deviceId, page: page, start_date: startDate, end_date: endDate },
                success: function(data) {
                    $('#data_table').html($(data).find('#data_table').html());
                    $('.pagination').html($(data).find('.pagination').html());

                    // 显示成功通知
                    $('.notification').text('数据加载成功').addClass('show');
                    setTimeout(() => {
                        $('.notification').removeClass('show');
                    }, 3000);
                },
                error: function(xhr, status, error) {
                    console.error('AJAX 错误:', status, error);

                    // 显示错误通知
                    $('.notification').text('无法加载数据，请检查设备ID或服务器状态').addClass('show notification-warning');
                    setTimeout(() => {
                        $('.notification').removeClass('show notification-warning');
                    }, 3000);
                }
            });
        }

        function exportCSV() {
            const deviceId = $('#device_select').val();
            const startDate = $('#start_date').val();
            const endDate = $('#end_date').val();
            const url = '/api/iot/export?' + $.param({ device_id: deviceId, start_date: startDate, end_date: endDate });
            window.location.href = url;

            // 显示导出通知
            $('.notification').text('正在导出CSV文件...').addClass('show');
            setTimeout(() => {
                $('.notification').removeClass('show');
            }, 3000);
        }

        function resetFilter() {
            $('#device_select').val('');
            $('#start_date').val('');
            $('#end_date').val('');
            loadData(1);
        }

        $('#device_select, #start_date, #end_date').on('change', function() {
            loadData(1);
        });

        // 初始化通知隐藏
        $(document).ready(function() {
            setTimeout(() => {
                $('.notification').removeClass('show');
            }, 3000);
        });
    </script>
</body>
</html>